<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <!--<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">-->
   <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
   <meta http-equiv="pragma" content="no-cache">
   <meta http-equiv="cache-control" content="no-cache">
   <meta http-equiv="expires" content="0">
   <title>alertView</title>
   <!-- <script data-res="eebbk">
       document.documentElement.style.fontSize = window.screen.width / 7.5 + 'px';
   </script> -->
   <script>
     !function(t,e){var n=t.documentElement,i="orientationchange"in window?"orientationchange":"resize",o=function(){var t=n.clientWidth,e=750;t&&(t>=e?n.style.fontSize="100px":n.style.fontSize=100*(t/e)+"px")};o(),t.addEventListener&&(e.addEventListener(i,o,!1),t.addEventListener("DOMContentLoaded",o,!1))}(document,window);
   </script>
   <style>
       * {
           margin: 0;
           padding: 0;
       }
       html,body {
           width: 100%;
           height: 100%;
       }
       body {
           font-size: 0.32rem;
           padding-top: constant(safe-area-inset-top);
           padding-left: constant(safe-area-inset-left);
           padding-right: constant(safe-area-inset-right);
           padding-bottom: constant(safe-area-inset-bottom);
       }
       .content {
           text-align: center;
       }
       .testBut {
           margin: 50px auto;
           width: 100px;
           height: 44px;
           border: 1px solid darkgray;
           outline:none;
           user-select: none;
           background-color: yellow;
       }
       .ui-alert-wrapper{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        width: 6rem;
        height:3rem;
        padding: .2rem;
        line-height: .4rem;
        text-align: center;
        background-color: #f0c;
       }
       /*.ui-alert-box{
          width: 6rem;
          padding: .2rem;
          line-height: .4rem;
          text-align: center;
          background-color: #f0c;
       }*/
       .ui-alert-title{
          font-size: .3rem;
       }
       .ui-alert-content{
          font-size: .24rem;
       }
       .ui-alert-button button{
        width: 2.4rem;
        height: .4rem;
        margin:0 .1rem;
       }
   </style>
   <!-- <link href="alertView.css" rel="stylesheet" type="text/css"> -->
</head>
<body>
   <section class="content">
       <button class="testBut" onclick="showLoading()">弹框加载</button>
   </section>
   <script type="text/javascript" src="../js/alertView.js"></script>
   <script>
       function showLoading() {
           UIAlertView.show({
               type:"input",
               title:"温馨提示",              //标题
               content:"VIP会员即将到期",     //获取新的
               isKnow:false
           });
           // var xx = new UIAlertView();
          // console.log(xx);
       }
   </script>
</body>
</html>